<template>
  <el-form class="password-form" label-position="top" label-width="100px" :model="formData">
    <!--旧密码-->
    <el-form-item :label="$t('ChangePwd.oldPassword')" prop="oldPassword">
      <el-input v-model="formData.oldPassword" show-password type="password" />
    </el-form-item>
    <!--新密码-->
    <el-form-item :label="$t('ChangePwd.newPassword')" prop="newPassword">
      <el-input v-model="formData.newPassword" show-password type="password" />
    </el-form-item>
    <!--确认新密码-->
    <el-form-item :label="$t('ChangePwd.confirmNewPassword')" prop="confirmNewPassword">
      <el-input v-model="formData.confirmNewPassword" show-password type="password" />
    </el-form-item>
    <!--保存按钮-->
    <el-form-item>
      <el-button v-if="$hasPer('save')" :loading="isRequesting" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { userChangePassword } from '../../api/sys/user'

export default {
  name: 'ChangePwd',
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 表单数据
      formData: {
        // 旧密码
        oldPassword: '',
        // 新密码
        newPassword: '',
        // 确认新密码
        confirmNewPassword: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 修改密码保存
    async save() {
      try {
        this.isRequesting = true
        await userChangePassword(this.formData, { msgSuccess: true, msgError: true })
        this.$store.dispatch('login/logout')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>

<style scoped>
.password-form {
  text-align: left;
  width: 30%;
  margin-top: 20px;
  margin-left: 50px;
}
</style>
